<template>
    <div class="main">
        <div class="top">
        </div>
            <ul>
                <li class="img" @click="$router.push('/info')">
                    <img :src="list.avatar" alt="">
                </li>
                <li class="line">{{list.nickname}}<van-icon name="edit" /></li>
                <li class="btn" @click="$router.push('/oto')">去约课</li>
            </ul>
        <ol class="banners">
            <li @click="go()">
            <p class="num">{{nums.courses}}</p>
            <p class="title">我的特色课</p>
            <p>已购特色课程的</p>
            </li>
            <li>
            <p  class="num">{{nums.integral}}</p>
            <p class="title">一对一辅导</p>
            <p>我的一对一辅导</p>
            </li>
            <li>
            <p  class="num" @click="$router.push('/MyBalance')">{{nums.oto}}.00</p>
            <p class="title">剩余学习币</p>
            <p>查看剩余的学习币</p>
            </li>
        </ol>
        <div class="center">
            <img src="../assets/下载.png" alt="">
           <div class="wenzi">
                <p>邀请好友注册APP，享多重好礼</p>
            <p>显示特惠，多邀多得</p>
           </div>
           <p class="icon">
               <van-icon name="arrow" />
           </p>
        </div>

         <div class="u1">
            <p class="p1">课程相关</p>
            <dl>
                <dd @click="$router.push('/Concern')">
                  <img class="img1" src="../assets/1.png" alt="">
                    <p>关注的老师</p>
                </dd>
                  <dd @click="$router.push('/Collect')">
                  <img class="img1" src="../assets/2.png" alt="">
                    <p>我的收藏</p>
                </dd>
            </dl>
        </div>
         <div class="u1">
            <p class="p1">订单相关</p>
            <dl>
                <dd @click="$router.push('/Order')">
                    <img class="img1" src="../assets/3.png" alt="">
                    <p >课程订单</p>
                </dd>
                  <dd @click="$router.push('/MemberOrder')"> 
                    <img class="img1" src="../assets/3.png" alt="">
                    <p>会员订单</p>
                </dd>
                 <dd @click="$router.push('/CourseOrder')">
                <img class="img1" src="../assets/3.png" alt="">
                    <p>约课订单</p>
                </dd>
            </dl>
        </div>
         <div class="u1">
            <p class="p1">我的账号</p>
            <dl>
                <dd @click="$router.push('/MyCoupon')">
                    <img class="img1" src="../assets/4.png" alt="">
                    <p>优惠券</p>
                </dd>
                  <dd @click="$router.push('/StudyCard')">
                  <img class="img1" src="../assets/5.png" alt="">
                    <p>学习卡</p>
                </dd>
                 <dd @click="$router.push('/Member')">
                  <img class="img1" src="../assets/6.png" alt="">
                    <p>会员</p>
                </dd>
            </dl>
        </div>
        <div class="u1">
            <p class="p1">自助服务</p>
            <dl>
                <dd>
                    <img class="img1" src="../assets/7.png" alt="">
                    <p>我的消息</p>
                </dd>
                  <dd>
                  <img class="img1" src="../assets/8.png" alt="">
                    <p>意见反馈</p>
                </dd>
                                <dd>
                    <img class="img1" src="../assets/9.png" alt="">
                    <p>在线客服</p>
                </dd>
                  <dd @click="$router.push('/options')">
                  <img class="img1" src="../assets/10.png" alt="">
                    <p>设置</p>
                </dd>
            </dl>
        </div>
    </div>
</template>

<script>
import { xinxis,num } from "../Request/http.js";
export default {
  name: "EverydayMine",

  data() {
    return {
      list: {},
      nums:[]
    };
  },

  mounted() {
    if(localStorage.getItem('login')){
      console.log(123);
    }else{
      console.log(321);
      this.$router.push('/login')
    }
    xinxis().then(res => {
      // console.log(res);
      this.list = res;
    });
    num().then(res=>{
      console.log(res);
      this.nums=res
    })
  },

  methods: {
    go(){
      this.$router.push('/MyStudy')
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
    background: #fff;
  .top {
    background: orangered;
    height: 3.5rem;
    border-radius: 0 0 3rem 3rem;
  }
  .img1{
    width: 0.533rem;
      height: 0.533rem;
      display: inline-block;
  }
  ul {
    margin: 0.3rem;
    border-radius: 0.2rem;
    padding: 0.3rem;
    background: #fff;
    position: relative;
    top: -2.4rem;
    overflow: hidden;
    .img {
      float: left;
      text-align: center;
      img {
        width: 1.5rem;
        height: 1.5rem;
        border-radius:  50%; 
      }
    }
    .line {
      padding-top: 0.5rem;
      font-size: 0.4rem;
    }
    .btn {
      background: orangered;
      padding: 0.1rem;
      float: right;
      border-radius: 0.2rem;
      color: #fff;
    }
  }
  ol{
      display: flex;
      justify-content: space-around;
        position: relative;
    top: -2.4rem;
      li{
          text-align: center;
           .title{
          font-size: .4rem;
      }
      .num{
          margin: 0;
          font-size: .4rem;
          color: orangered;
      }
      }
     
  }
  .center{
        position: relative;
    top: -2.4rem;
    margin: .4rem;
       border-radius:2rem;
       color: #fff;
    background-image: linear-gradient(to right , rgb(250, 226, 183), rgb(255, 136, 0));
       display: flex;
      justify-content: space-around;
      img{padding-top:.5rem;
          width: 1rem;
          height: 1rem;
      }
      .icon{
          font-size: .5rem;
          .van-icon{
              font-size: .8rem
          }
      }
  }
.u1{
     position: relative;
    top: -2.4rem;
    overflow: hidden;
    margin: 0 .2rem;
    border-bottom: 1px solid #ccc;
    .p1{
        font-size: .4rem;
    }
    dl{
    display: flex;
    flex-direction: row;
    text-align: center;
    dd{
        // width: 25%;,
        margin: 0rem 0.6rem;
        .van-icon{
            font-size: .5rem;
        }
    }
    }
}
}
.banners{
  li{
    border: .01rem solid #ccc;
    padding: .2rem;
    border-radius: .2rem;
  }
}
</style>